<template>
  <div class="map">
    <div class="button_list">
      <button @click="save()">确认</button>
      <button @click="openPoint" style="background-color: #1E1B19;">
        +点击添加打卡点
      </button>
      <el-upload
        class="upload-demo"
        action="#"
        accept=".jpg,.jpeg,.png,.gif"
        :http-request="httpRequest"
        :before-upload="beforeAvatarUpload"
        :show-file-list="false"
      >
        <el-button size="small" type="primary">更换地图</el-button>
      </el-upload>
    </div>
    <div class="box">
      <div class="box-left">
        <img class="big" v-if="imgList[0]" :src="imgList[0].url" alt="" />
        <!-- @mousedown.prevent="move($event, `img${i + 1}`, item)" 

          -->
        <div
          v-for="(item, i) in pointList"
          :key="i"
          :style="{ top: item.y + 'px', left: item.x + 'px' }"
          @mousemove="goto($event, item)"
          @mouseup="up($event, item)"
          @mousedown="down($event, item)"
          @mouseleave="leave"
          :class="`small-box img${i + 1}`"
        >
          <img
            :class="`small`"
            src="/static/skin/default/MCS/AIGC/Inventory/images/point1.png"
            alt=""
          />
          <span>{{ i + 1 }}</span>
        </div>
      </div>
      <div class="box-right">
        <div class="bd" v-for="(item, i) in pointList" :key="item.id">
          <div class="row">
            <i class="del" @click="del(i)"></i>
            <div class="point">
              <img
                src="/static/skin/default/MCS/AIGC/Inventory/images/point1.png"
              />
              <span>{{ i + 1 }}</span>
            </div>
            <span class="name">{{ item.Name }}</span>
          </div>
          <div class="flex">
            <div class="row">
              左边距:<el-input v-model="item.x" type="Number"></el-input>像素
            </div>
            <div class="row">
              上边距:<el-input v-model="item.y" type="Number"></el-input>像素
            </div>
          </div>
        </div>
      </div>
    </div>

    <SelectPoint ref="SelectPoint" @getList="getPointList"></SelectPoint>
  </div>
</template>

<script>
import SelectPoint from "./SelectPoint.vue";
export default {
  name: "point",
  components: {
    SelectPoint
  },
  props: {
    imgs: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      octopus: this.$parent.$parent.octopus,
      pointList: [],
      imgList: [],
      boxInfo: {
        w: 0,
        h: 0
      },
      is_move: false
    };
  },
  created() {},
  watch: {},
  methods: {
    upSet(list, pointList) {
      this.imgList = list;
      let left = document.querySelector(".box-left");
      this.boxInfo.w = left.offsetWidth;
      this.boxInfo.h = left.offsetHeight;
      
      pointList.map(v => {
        v.x = v.x;
        v.y = v.y;
      });
      this.pointList = pointList;

    },
    openPoint() {
      this.$refs.SelectPoint.drawerOpen(this.pointList);
    },
    getPointList(val) {
      this.pointList = val;
    },
    del(i) {
      this.pointList.splice(i, 1);
    },
    
    beforeAvatarUpload(file) {
      const isJPEG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isGIF = file.type === "image/gif";
      const isLt2M = file.size / 1024 < 512;
      if (!isJPEG && !isPNG && !isGIF) {
        this.$message.error("上传图片只能是 JPG 或 PNG或 GIF 格式!");
        return false;
      } else if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 512KB!");
        return false;
      }
      return true;
    },
    httpRequest({ file }) {
      let o = this;
      o.octopus.request.api.upload(
        file,
        () => {},
        fileData => {
          if (fileData.status.code == 200) {
            o.imgList = [
              {
                url: o.octopus.config.url + fileData.content.url,
                name: fileData.content.name,
                status: "success"
              }
            ];
            o.$emit("imgList", o.imgList);
          }
        }
      );
    },
    changeMap() {},
    save() {
      
      this.$emit("close", this.pointList, this.boxInfo);
    },
    down(e) {
      this.is_move = true;
    },
    goto(e, item) {
      if (!this.is_move) {
        return;
      }
      this.$set(item,'x',item.x + e.movementX)
      this.$set(item,'y',item.y + e.movementY)
      this.$forceUpdate()
    },
    up(e) {
      this.is_move = false;
    },
    leave(){
      this.is_move = false;
    }
  }
};
</script>
<style scoped>
.map {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  bottom: 0;
  background: #fff;
  padding: 20px;
  z-index: 2006;
  width: 100%;
  height: 100%;
}

.button_list {
  margin-top: 1rem;
  display: flex;
  background-color: #ffff;
  bottom: 1rem;
  width: calc(100% - 7rem);
}

.button_list button {
  border: none;
  height: 4rem;
  width: 12rem;
  border-radius: 1rem;
  margin-left: 1rem;
  color: #ffff;
  background-color: #f78c53;
  cursor: pointer;
}

.list-box .right .add_content {
  height: 4.5rem;
  line-height: 4.5rem;
  border: 1px dashed #f87338;
  display: inline-block;
  padding: 0 1.5rem;
  cursor: pointer;
  border-radius: 0.5rem;
}
.box {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 94%;
  position: relative;
  margin-top: 20px;
  justify-content: space-between;
}
.bd {
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 0;
}
.box-left {
  width: 60vw;
  height: calc(100% - 8vh);
  /* border: 1px solid red; */
  box-shadow: 3px 3px 10px 10px #eaeaea;
  position: relative;
  overflow: hidden;
}
.box-left .big {
  width: 100%;
}
.box-left .small {
  width: 100%;
}
.box-left .small-box {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  width: 33px;
  color: #fff;
}
.box-left .small-box span {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translate(-50%, 0);
}
.box-right {
  width: calc(100% - 63vw);
  height: calc(100% - 8vh);
  /* border: 1px solid red; */
  overflow-y: auto;
  padding: 20px;
}
.del {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f87338;
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.del::after {
  content: "";
  width: 12px;
  height: 2px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.name {
  font-size: 2rem;
}
.point {
  position: relative;
  margin-left: 10px;
}
.point img {
  width: 33px;
}
.point span {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 20%);
  color: #fff;
}
.row >>> .el-input {
  width: 4vw;
}
.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 40px;
}

.row >>> input::-webkit-outer-spin-button,
.row >>> input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.row >>> input[type="number"] {
  -moz-appearance: textfield;
}
.row .el-input {
  margin: 0 10px;
}
.row >>> .el-input__inner {
  line-height: 1px !important;
}
</style>
